<template>
  <view class="page">
    <view v-if="$data.info">
      <view class="title_box"> 您对平台服务满意吗？ </view>
      <view class="top padding-bottom">
        <view class="basic">
          <view class="basic_img">
            <image :src="$data.info._picurl" />
          </view>
          <view class="basic_content">
            <view class="basic_content--title">
              {{ $data.info.serviceTitle }}
            </view>
            <view class="basic_content--price text-price">
              {{ $data.info.firstTotalPrice }}
            </view>
          </view>
        </view>
        <view class="scoring">
          <view
            class="scoring_item"
            v-for="(icon, iconIndex) in 5"
            :key="iconIndex"
          >
            <up-icon
              name="star-fill"
              :color="
                iconIndex <= $data.serviceScore - 1
                  ? BasicConfig.MainColor
                  : '#bbbbbb'
              "
              :size="30"
              @click="onScore('service', icon)"
            ></up-icon>
          </view>
        </view>
      </view>
      <view class="title_box"> 您对保洁师的服务满意吗？ </view>
      <!-- 阿姨信息 -->
      <view class="padding bg-white">
        <view class="worker" v-if="$data.info.workerDetail">
          <view class="detail">
            <view class="detail_img">
              <image :src="$data.info.workerDetail._avatar" />
            </view>
            <view class="detail_content">
              <view class="detail_content--title">
                {{ $data.info.workerDetail.nickname }}
              </view>
              <view class="scoring">
                <view
                  class="scoring_item"
                  v-for="(icon, iconIndex) in 5"
                  :key="iconIndex"
                >
                  <up-icon
                    name="star-fill"
                    :color="
                      icon <= $data.info.workerDetail.star
                        ? BasicConfig.MainColor
                        : '#bbbbbb'
                    "
                  ></up-icon>
                </view>
              </view>
              <view class="detail_content--phone">
                <view>
                  {{ hidePhone($data.info.workerDetail.phone) }}
                </view>
                <view class="copy" @tap="onCall(phoneType.worker)">
                  联系保洁师
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="scoring">
          <view
            class="scoring_item"
            v-for="(icon, iconIndex) in 5"
            :key="iconIndex"
          >
            <up-icon
              name="star-fill"
              :color="
                iconIndex <= $data.workerScore - 1
                  ? BasicConfig.MainColor
                  : '#bbbbbb'
              "
              :size="30"
              @click="onScore('worker', icon)"
            ></up-icon>
          </view>
        </view>
      </view>
      <!-- 评论内容 -->
      <view class="padding">
        <up-textarea
          v-model="$data.remark"
          placeholder="请输入评论内容"
          count
          :height="130"
        ></up-textarea>
      </view>
      <!-- 上传图片 -->
      <view class="margin-top-xl padding">
        <view class="text-bold margin-bottom">上传图片</view>
        <up-upload
          :fileList="$data.fileList"
          :previewFullImage="true"
          :deletable="true"
          @afterRead="juAfterRead($event, 'fileList')"
          @delete="juDeletePic($event, 'fileList')"
          name="eventImages"
          multiple
          width="26vw"
          height="26vw"
          :maxCount="9"
          @oversize="oversize"
          accept="image"
          :maxSize="uploadSize"
        >
          <view class="upload-custom">
            <image :src="ImgIconPhotoGray" mode="scaleToFill" />
          </view>
        </up-upload>
      </view>
      <!-- 底部按钮 -->
      <view class="foot foot_box">
        <view class="btn btn_save" @tap="onSave"> 提交 </view>
      </view>
    </view>
    <PopupCSPhone
      v-model:show="$data.csphoneShow"
      :title="$data.csTitle"
      :type="$data.csType"
      :phone="phone"
    />
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick, computed } from "vue";
import { onLoad, onShow, onHide, onReady, onUnload } from "@dcloudio/uni-app";
import errorCode from "../../../../utils/http/errorCode";
import { isDev } from "../../../../utils/env";
import BasicConfig from "../../../../utils/config";
import { orderStatus, orderStatusConfig } from "../../../../enums/order";
import { jumpPage } from "../../../../utils/route/route";
import { getOrderDetail } from "../../../../api/Interface/order";
import { phoneType } from "../../../../enums/common";
import PopupCSPhone from "../../../../components/PopupCSPhone.vue";
import { useAfterRead, useDeletePic } from "../../../../hooks/useUpload";
import { hidePhone, oversize, uploadSize } from "../../../../utils/utils";
import { ImgIconPhotoGray } from "../../../../utils/iconMap";
import { domesticServiceEvaluation } from "../../../../api/Interface/comment";
import { useImgSrc } from "../../../../hooks/useImg";
import { useJumpOrderPage } from "../../../../hooks/useOrder";

const $data = reactive({
  localNo: "",
  orderServiceId: "",
  info: null,
  csphoneShow: false,
  csTitle: "联系电话",
  csType: phoneType.custom,
  serviceScore: 0, // 服务打分
  workerScore: 0, // 保洁打分
  remark: "",
  fileList: [],
});
const init = () => {
  getOrderDetail({
    localNo: $data.localNo,
    orderServiceId: $data.orderServiceId,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.info = res.data;
      useJumpOrderPage(res.data);
      if ($data.info) {
        setTitle();
        $data.info._picurl = useImgSrc($data.info.picurl);
        // if (isDev) {
        //   $data.info.workerDetail = {
        //     workerId: 1,
        //     //保洁详情
        //     nickname: "李*", //保洁姓名
        //     avatar: "/logo.png", //保洁头像
        //     phone: "187****4521", //保洁电话
        //     star: 4, //星级
        //   };
        // }
        if ($data.info.workerDetail) {
          $data.info.workerDetail._avatar = useImgSrc(
            $data.info.workerDetail.avatar
          );
        }
      }
    }
  });
};
const onSave = () => {
  const params = {
    localNo: $data.localNo,
    platformStar: $data.serviceScore,
    platformContent: $data.remark,
    workerId: $data.info.workerDetail.workerId,
    workerStar: $data.workerScore,
    img: $data.fileList.map((m) => m.file.data[0].url).join(","),
  };
  if (!params.platformStar) {
    BasicConfig.toast("请给平台服务打分");
    return;
  }
  if (!params.platformContent) {
    BasicConfig.toast("请填写评价内容");
    return;
  }
  if (!params.workerStar) {
    BasicConfig.toast("请给保洁师打分");
    return;
  }
  uni.showModal({
    content: "确认提交?",
    confirmColor: BasicConfig.MainColor,
    success: (success) => {
      if (success.confirm) {
        domesticServiceEvaluation(params).then((res) => {
          BasicConfig.toast(res.msg);
          if (res.code === errorCode.success) {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        });
      }
    },
  });
};
const setTitle = () => {
  uni.setNavigationBarTitle({
    title: orderStatusConfig[$data.info.firstStatus]?.label ?? "",
  });
};
const onScore = (type, score) => {
  if (type === "service") {
    $data.serviceScore = score;
  } else if (type === "worker") {
    $data.workerScore = score;
  }
};
const onCall = (type) => {
  $data.csphoneShow = true;
  $data.csType = type;
  if (type == phoneType.worker) {
    $data.csTitle = "保洁师电话";
  } else if (type === phoneType.custom) {
    $data.csTitle = "官方客服电话";
  }
};
const phone = computed(() => {
  if ($data.info && $data.info.workerDetail && $data.info.workerDetail.phone) {
    return $data.info.workerDetail.phone;
  }
  return "";
});
const previewImage = (url) => {
  uni.previewImage({
    urls: [fileUrl + url],
  });
};
// 删除图片
const juDeletePic = (event, key) => {
  $data[key] = useDeletePic(event, $data[key]);
  console.log("fileList del", $data[key]);
};
const juAfterRead = async (event, key) => {
  console.log("juAfterRead", event);
  const { data } = await useAfterRead({
    event,
    fileList: $data[key],
    formData: { user: "test" },
    key: "file",
  });
  if (data) {
    data.forEach((item) => {
      if (item.file) {
        item.url = item.file.url;
      }
    });
    $data[key] = data;
  }
  console.log("fileList", $data[key]);
};
onLoad((options) => {
  $data.localNo = options.localNo;
  $data.orderServiceId = options.orderServiceId;
  init();
});
onUnload(() => {});
onReady(() => {});
</script>

<style lang="scss" scoped>
@import "../../../static/style/order/detail/common.scss";
.page {
  background: #ffffff;
  .title_box {
    padding: 30rpx;
    font-weight: 700;
    background: #f7f8fa;
  }
  .worker {
    background: #ffffff;
    .detail {
      //   padding: 30rpx;
      display: flex;
      align-items: center;
      &_img {
        width: 160rpx;
        height: 160rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }
      }

      &_content {
        width: calc(100% - 160rpx);
        padding-left: 30rpx;
        &--title {
          font-size: 38rpx;
          font-weight: 700;
        }
        &--phone {
          margin-top: 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .scoring {
    display: flex;
    align-items: center;
    margin: 20rpx 0;
  }
}
::v-deep .u-textarea {
  border-radius: 20rpx;
}
::v-deep .u-upload__wrap__preview {
  margin: 0 !important;
  margin-bottom: 30rpx !important;
  &:not(:nth-of-type(3n)) {
    margin-right: 30rpx !important;
  }
}
.upload-custom {
  background: #f1f1f1;
  border: 1px dashed #aaaaaa;
  border-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26vw;
  height: 26vw;
  image {
    width: 100%;
    height: 100%;
  }
}
</style>
